<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item 
        v-for="(item, index) in levelList" 
        :key="item.path" 
      >
        <span 
          v-if="shouldDisableLink(item, index)" 
          class="no-redirect"
        >
          {{ item.meta.title  }}
        </span>
        <a 
          v-else 
          @click.prevent="navigateTo(item)" 
        >
          {{ item.meta.title  }}
        </a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>
 
<script setup>

const route = useRoute()
const router = useRouter()
const levelList = ref([])
 
// 获取面包屑数据 
const getBreadcrumb = () => {
  levelList.value  = route.matched  
    .filter(item => item.meta?.title  && item.meta.breadcrumb  !== false)
}
 
// 判断是否应该禁用链接
const shouldDisableLink = (item, index) => {
  return item.redirect  === 'noRedirect' || index === levelList.value.length  - 1 
}
 
// 导航到指定路由
const navigateTo = (item) => {
  router.push(item.redirect  || item.path) 
}
 
// 监听路由变化 
watchEffect(() => {
  if (!route.path.startsWith('/redirect/'))  {
    getBreadcrumb()
  }
})
 
// 初始化获取面包屑
getBreadcrumb()
</script>
 
<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb  {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;
 
  .no-redirect {
    color: var(--el-text-color-secondary);
    cursor: default;
  }
 
  a {
    color: var(--el-color-primary);
    transition: color 0.2s;
    
    &:hover {
      color: var(--el-color-primary-light-3);
    }
  }
}
</style>